import React from "react"
import "../../css/SystemStructure.scss"

class Level extends React.Component {
    render() {
        return (
            <ul className="level">
                <li><div className="left">
                    <p>第5级</p>
                    <p>虚拟机器</p>
                </div>
                    <div className="center">
                        <div className="center-border">
                            <p>应用语言机器M5</p>
                            <p>具有L5机器语言（应用语言）</p>
                        </div>
                        <div className="arrow-below">↓</div>
                    </div>
                    <div className="right">
                        <p>应用语言程序经应用程序包翻译成高级程序</p>
                    </div>
                </li>

                <li><div className="left">
                    <p>第4级</p>
                    <p>虚拟机器</p>
                </div>
                    <div className="center">
                        <div className="center-border">
                            <p>高级语言机器M4</p>
                            <p>具有L4机器语言（高级语言）</p>
                        </div>
                        <div className="arrow-below">↓</div>
                    </div>
                    <div className="right">
                        <p style={{paddingTop: 0}}>高级语言程序经编译程序翻译成汇编语言程序<br />（或是某种中间语言程序，或是机器语言程序）</p>
                    </div>
                </li>

                <li><div className="left">
                    <p>第3级</p>
                    <p>虚拟机器</p>
                </div>
                    <div className="center">
                        <div className="center-border">
                            <p>汇编语言机器M3</p>
                            <p>具有L3机器语言（汇编语言）</p>
                        </div>
                        <div className="arrow-below">↓</div>
                    </div>
                    <div className="right">
                        <p>汇编语言程序经编译程序翻译成机器语言程序</p>
                    </div>
                </li>

                <li><div className="left">
                    <p>第2级</p>
                    <p>虚拟机器</p>
                </div>
                    <div className="center">
                        <div className="center-border">
                            <p>操作系统机器M2</p>
                            <p>具有L2机器语言（作业控制语言等）</p>
                        </div>
                        <div className="arrow-below">↓</div>
                    </div>
                    <div className="right">
                        <p>一般用机器语言程序解释作业控制语句</p>
                    </div>
                </li>

                <li><div className="left">
                    <p>第1级</p>
                    <p>实际机器</p>
                </div>
                    <div className="center">
                        <div className="center-border">
                            <p>传统机器语言机器M1</p>
                            <p>具有L1机器语言（机器指令系统）</p>
                        </div>
                        <div className="arrow-below">↓</div>
                    </div>
                    <div className="right">
                        <p>用微指令程序解释机器指令</p>
                    </div>
                </li>

                <li><div className="left">
                    <p>第0级</p>
                    <p>实际机器</p>
                </div>
                    <div className="center">
                        <div className="center-border">
                            <p>微程序机器M0</p>
                            <p>具有L0机器语言（微指令系统）</p>
                        </div>
                        
                    </div>
                    <div className="right">
                        <p>微指令由硬件直接执行</p>
                    </div>
                </li>
            </ul>
        )
    }

}

export default Level